import React, { Component } from 'react';
import {
	StyleSheet,
	Text,
	View,
	Image,
	TouchableOpacity,
	Animated,
	ScrollView
} from "react-native";
import { style } from '../../../theme/style';
import { Common } from '../../../component/common/Common.js';
import { GLOBAL } from '../../../config/global';
import ToastUtil from '../../../utils/toast';
import HTTP from '../../../utils/http';
import { API, API_GENERATE } from '../../../config/api';
import { DashedLine } from './_components/DashedLine';
import Dictionary from '../../../utils/dictionary';
import ModalPicDelComponent from '../../../component/ModalPicDelComponent';
import MethodUtil from '../../../utils/MethodUtil';
import { STORAGE_CONSTANT } from '../../../config/storage';
import StorageHelper from '../../../utils/storageHelper';
import { CURRENCY } from '../../../utils/helper';

const innerImg = require('../../../imgs/order/inner.png'); // 内
const outerImg = require('../../../imgs/order/outer.png'); // 外
const showImg = require('../../../imgs/order/show.png'); // 打开
const closeImg = require('../../../imgs/order/close.png'); // 打开
const scale = GLOBAL.SCALE;
const modalPicDelCfg = {
	visible: false,
	uri: null,
	delPress: () => { },
	picPress: () => { }
}

export class LongOrderDetailPage extends Component {
	static navigationOptions = ({ navigation, navigationOptions }) => {
		let params = navigation.state.params || {};
		const { orderType } = params;
		return {
			title: orderType === 'P' ? '长约框架-采购' : '长约框架-销售',
			headerTintColor: style.color.white,
			headerLeft: <Common type="headLeft" onPress={() => { navigation.goBack() }} color='#fff' />,
			headerStyle: {
				elevation: 0,
				backgroundColor: style.color.themeColor,
				borderBottomWidth: 0
			},
			headerTitleStyle: {
				flex: 1,
				textAlign: 'center'
			}
		}
	}

	constructor(props) {
		super(props);
		this.state = {
			showBaseInfo: false,
			baseInfoOpenHeight: 0,
			imgRoute: new Animated.Value(0),
			longOrderDetail: null,
			orderItemList: [],
			userId: ''
		};
		let { pramasData, orderType, choice } = this.props.navigation.state.params || {};
		console.log('this.props.navigation.state.params', this.props.navigation.state.params)
		this.pramasData = pramasData;
		this.orderType = orderType;
		this.choice = choice || {};
		this.PageText = {}; // 标题 采销之分
		this.payTypeArrNew = [];
		//图片弹框
		modalPicDelCfg.picPress = () => {
			modalPicDelCfg.visible = false;
			modalPicDelCfg.uri = null;
			this.setState({
				previewModalVisible: false,
			});
		}
		this.onOffInfo = true;
		this.onOff = true;
	}

	async	componentWillMount () {
		this.initPage();
		this._initPageText();

		let userInfo = await StorageHelper.get(STORAGE_CONSTANT.USER_INFO_KEY);
		let userInfoJson = JSON.parse(userInfo);
		this.setState({
			userId: userInfoJson.userId
		})
	}

	//初始化标题
	_initPageText = () => {
		if (this.orderType === 'P') {
			this.PageText.companyName = '供应商';
			this.PageText.payType = '付款类型';
			this.PageText.payMethod = '付款方式';
			this.PageText.payMethodTime = '付款期限';
		} else {
			this.PageText.companyName = '客户';
			this.PageText.payType = '收款类型';
			this.PageText.payMethod = '收款方式';
			this.PageText.payMethodTime = '收款期限';
		}
	}

	async payInit (data) {
		console.log('data', data)
		//付款类型
		this.payTypeData = await Dictionary.get('EC_PAY_TYPE'); // 付款类型

		//付款类型初始化
		this.payTypeData.forEach((item, indexKey) => {
			if (data && item.dictKey == data.payType) {
				this.payTypeArr = this.payTypeData[indexKey] && this.payTypeData[indexKey].comments ? eval(this.payTypeData[indexKey].comments) : [];
			}
		})
		this.payTypeArr && this.payTypeArr.forEach((item) => {
			let str = item.title + data[item.name] + item.text
			this.payTypeArrNew.push(str);
		})
	}

	async	initPage () {
		const orderId = this.pramasData.orderId;
		let response = await HTTP.POST(API_GENERATE(API.GET_LONG_ORDER_DETAIL) + '/' + orderId);
		console.log('详情数据-response', response)
		if (!response) {
			this.setState({
				longOrderDetail: false,
			})
			return
		}
		response.orderItemList.forEach(item => {
			item.showItem = false;
			item.boxHeight = new Animated.Value(124 * scale);
		})
		this.payInit(response);
		this.setState({
			longOrderDetail: response,
			orderItemList: response.orderItemList
		})
	}

	//基本信息展开和隐藏
	toggleBaseInfo = () => {
		let { baseInfoBoxHeight, baseInfoOpenHeight, showBaseInfo, imgRoute } = this.state;
		showBaseInfo = !showBaseInfo;
		Animated.timing(baseInfoBoxHeight, {
			duration: 300,
			toValue: showBaseInfo ? baseInfoOpenHeight : 0,
		}).start();
		Animated.timing(imgRoute, {
			duration: 300,
			toValue: showBaseInfo ? 0 : 1,
		}).start();

		this.setState({ showBaseInfo })
	}

	_onLayout = (event) => {
		let startHeight = 0;
		startHeight = event.nativeEvent.layout.height;
		if (this.onOffInfo) {
			this.setState({
				baseInfoOpenHeight: startHeight,
				baseInfoBoxHeight: new Animated.Value(startHeight),
				showBaseInfo: true,
			})
			this.onOffInfo = false
		}
	}

	// 图片点击预览
	async preview (fileId) {
		const imgData = await HTTP.GET(API_GENERATE(API.GET_IMG_VIEW), { fileId }, null, 30000);
		if (imgData && imgData.image) {
			let { image } = imgData;
			if (image && image.length) {
				modalPicDelCfg.visible = true;
				modalPicDelCfg.delTextHide = true; //隐藏删除
				modalPicDelCfg.uri = image;
				modalPicDelCfg.attachmentModalStyle = { backgroundColor: 'rgba(0,0,0,0)' };
				this.setState({
					previewModalVisible: true
				});
			}
		}
	}

	//查看执行量订单
	goLongExcDetail (item) {
		if (item.bizStaffId == this.state.userId) {
			this.props.navigation.navigate('OrderDetailsPage', { orderType: this.orderType, orderId: this.pramasData.orderId, tCode: 'E' })
		} else {
			ToastUtil.showWarning('无查看权限');
		}
	}

	// 商品展开和隐藏
	toggleProduct = (index, boxHeight, openHeight) => {
		let { orderItemList } = this.state;

		orderItemList[index].showItem = !orderItemList[index].showItem;
		orderItemList[index].boxHeight = boxHeight;
		orderItemList[index].openHeight = openHeight;
		Animated.spring(boxHeight, {
			duration: 300,
			toValue: orderItemList[index].showItem ? openHeight * scale : 124 * scale,
		}).start();
		this.setState({ orderItemList })
	}

	_onProductLayout = (index, event) => {
		let { orderItemList } = this.state;
		let startHeight = 0;
		startHeight = event.nativeEvent.layout.height;
		orderItemList[index].openHeight = new Animated.Value(startHeight * scale);
		orderItemList[index].showItem = false;
		orderItemList[index].boxHeight = new Animated.Value(124 * scale);

		if (this.onOff) {
			this.setState({
				orderItemList
			})
			this.onOff = false
		}
	}

	_renderTopCard = (data) => {
		const { orderId, tradeType, exeBeginDate, exeEndDate, totalOrderQuantity, totalExecutableQuantity } = data;
		return (
			<View>
				<View style={styles.topBg}></View>
				<View style={[styles.topCard, styles.contentView]}>
					<View style={styles.topCardHeader}>
						<Text style={styles.textValue}>长约号:{orderId || ''}</Text>
						<Image source={tradeType == 'I' ? innerImg : outerImg} style={styles.orderTypeImg} />
						<Text style={styles.textValue}>{'进行中'}</Text>
					</View>
					<View style={styles.topCardContent}>
						<View style={styles.topCardContentItem}>
							<Text style={[styles.commonText, styles.textLabel]} numberOfLines={1}>长约总量(吨)</Text>
							<Text style={[styles.commonText, styles.textValue]} numberOfLines={1}>{totalOrderQuantity || '--'}</Text>
						</View>
						<View style={styles.topCardContentItem}>
							<Text style={[styles.commonText, styles.textLabel]} numberOfLines={1}>剩余量(吨)<Text style={styles.redTips}>含溢短装</Text></Text>
							<Text style={[styles.commonText, styles.textValue]} numberOfLines={1}>{totalExecutableQuantity || '--'}</Text>
						</View>
						{/* <View style={styles.topCardContentItem}>
							<Text style={[styles.commonText, styles.textLabel]} numberOfLines={1}>交货周期</Text>
							<Text style={[styles.commonText, styles.textValue]} numberOfLines={1}>{'2个月'}</Text>
						</View> */}
					</View>
					<DashedLine />
					<View style={styles.topCardFooter}>
						<Text style={[styles.commonText, styles.textLabel]}>有效期：{exeBeginDate && exeBeginDate.substring(0, 10)}~{exeEndDate && exeEndDate.substring(0, 10)}</Text>
					</View>
				</View>
			</View>
		)
	}

	_renderOrderBaseInfo = (data) => {
		const { baseInfoBoxHeight, imgRoute, showBaseInfo } = this.state;
		let { tradeType, companyName, payStyleName, payTypeName, lostRate,
			lostRenderName, purchaseDeliveryTypeName, saleDeliveryTypeName, deliveryType, transportTypeName, baseDateSettle, orderItemList,
			logisticsPrice, bizStaffName, bizTeamNameList, bizTeamName, destAddress, remark, priceTermName, outOrderPayMethodList, currency, contractInfo, attachmentFileVOs } = data || {};
		if (bizTeamNameList) {
			bizTeamNameList = bizTeamNameList.toString();
		}

		const { signAddress, finalFileId } = contractInfo || {};
		let titleImgObj = require('../../../imgs/global/down.png');
		const spin = imgRoute.interpolate({
			inputRange: [0, 1],//输入值
			outputRange: ['0deg', '-90deg'] //输出值
		})
		return (
			<View style={[styles.contentView]}>
				<TouchableOpacity activeOpacity={1} style={styles.baseInfoTitle} onPress={() => {
					this.toggleBaseInfo();
				}}>
					<View style={{ flexDirection: 'row' }}>
						<Text style={styles.baseInfoTitleText}>{this.orderType === 'P' ? '采购' : '销售'}信息</Text>
						{finalFileId && showBaseInfo ? <Text style={styles.baseInfoContract} onPress={() => {
							this.props.navigation.navigate('ContractPdfPage', { finalFileId, title: '合同信息' });
						}}>[查看合同]</Text> : null}
					</View>
					<Animated.Image style={[styles.imgStyle, { transform: [{ rotate: spin }] }]} source={titleImgObj}></Animated.Image>
				</TouchableOpacity>
				<Animated.View style={{ height: baseInfoBoxHeight, overflow: 'hidden' }}>
					<View style={styles.baseInfoView} onLayout={(event) => this._onLayout(event)}>
						<View style={styles.baseInfoItem}>
							<Text style={[styles.textLabel, styles.baseInfoLabel]}>{this.PageText.companyName}</Text>
							<Text style={[styles.textValue, styles.baseInfoValue]}>{companyName || ''}</Text>
						</View>
						<View style={styles.baseInfoItem}>
							<Text style={[styles.textLabel, styles.baseInfoLabel]}>计价方式</Text>
							<Text style={[styles.textValue, styles.baseInfoValue]}>{orderItemList[0].priceType == 1 ? '一口价' : '暂定价'}</Text>
						</View>
						<View style={styles.baseInfoItem}>
							<Text style={[styles.textLabel, styles.baseInfoLabel]}>{this.PageText.payType}</Text>
							<View style={styles.baseInfoValueRow}>
								<Text style={[styles.textValue]}>{payTypeName}</Text>
								<Text style={styles.singleBorder}>|</Text>
								<Text style={[styles.textValue]}>{payStyleName || ''}</Text>
								<Text style={[styles.textValue, styles.baseInfoValueUom]}>({CURRENCY.getUnit(currency || 'RMB').type})</Text>
							</View>
						</View>
						{
							tradeType == 'I' ?
								<View style={styles.baseInfoItem}>
									<Text style={[styles.textLabel, styles.baseInfoLabel]}>{this.PageText.payMethodTime}</Text>
									<View style={styles.baseInfoValueRow}>
										{
											this.payTypeArrNew && this.payTypeArrNew.map((item, index) => {
												return (
													<View key={index} style={[{ flexDirection: 'row' }, 2 == index ? { marginTop: 10 * scale } : null]}>
														<Text style={[styles.textValue]}>{item}</Text>
														{(index + 1) !== this.payTypeArrNew.length ? <Text style={styles.singleBorder}>|</Text> : null}
													</View>
												)
											})
										}
									</View>
								</View> : null
						}
						{
							tradeType == 'O' ?
								<View style={styles.baseInfoItem}>
									<Text style={[styles.textLabel, styles.baseInfoLabel]}>价格条款</Text>
									<Text style={[styles.textValue, styles.baseInfoValue]}>{priceTermName || '-'}</Text>
								</View> : null
						}
						{
							tradeType == 'O' ?
								outOrderPayMethodList && outOrderPayMethodList.map((item, index) => {
									return (
										<View style={styles.baseInfoItem} key={index}>
											<Text style={[styles.textLabel, styles.baseInfoLabel]}>付款方式{index + 1}</Text>
											<View style={styles.baseInfoValueColumn}>
												<Text style={[styles.textValue, { marginBottom: 7 * scale }]}>{item.payMethodName}</Text>
												<View style={{ flexDirection: 'row', marginBottom: 7 * scale }}>
													<Text style={[styles.textValue]}>付款比例{item.prepayRate}%</Text>
													<Text style={styles.singleBorder}>|</Text>
													<Text style={[styles.textValue]}>付款期限 {item.payExpireDays}天</Text>
												</View>
											</View>
										</View>
									)
								}) : null
						}
						<View style={styles.baseInfoItem}>
							<Text style={[styles.textLabel, styles.baseInfoLabel]}>交货方式</Text>
							{/**货权转移不展示途损 */}
							{
								deliveryType === 'U' ?
									<View style={styles.baseInfoValueColumn}>
										<View style={{ flexDirection: 'row', marginBottom: 7 * scale }}>
											<Text style={[styles.textValue]}>{this.orderType === 'S' ? saleDeliveryTypeName : purchaseDeliveryTypeName}</Text>
										</View>
									</View>
									:
									<View style={styles.baseInfoValueColumn}>
										<View style={{ flexDirection: 'row', marginBottom: 7 * scale }}>
											<Text style={[styles.textValue]}>{this.orderType === 'S' ? saleDeliveryTypeName : purchaseDeliveryTypeName}</Text>
											<Text style={styles.singleBorder}>|</Text>
											<Text style={[styles.textValue]}>{lostRenderName}承损</Text>
											<Text style={styles.singleBorder}>|</Text>
										</View>
										<Text style={[styles.textValue]}>千分之{lostRate * 1000 || 0}（途损率）</Text>
									</View>
							}
						</View>
						{
							deliveryType === 'U' ? null :
								<View style={styles.baseInfoItem}>
									<Text style={[styles.textLabel, styles.baseInfoLabel]}>运输方式</Text>
									<View style={styles.baseInfoValueRow}>
										<Text style={[styles.textValue]}>{transportTypeName}</Text>
										<Text style={styles.singleBorder}>|</Text>
										<Text style={[styles.textValue]}>单价：{tradeType == 'I' ? '¥' : '$'}{logisticsPrice || 0}{tradeType == 'I' ? '元' : '美元'}/吨</Text>
									</View>
								</View>
						}
						<View style={styles.baseInfoItem}>
							<Text style={[styles.textLabel, styles.baseInfoLabel]}>品质约定</Text>
							<Text style={[styles.textValue, styles.baseInfoValue]}>{orderItemList[0].qualityStdName || '-'}</Text>
						</View>
						{baseDateSettle ? <View style={styles.baseInfoItem}>
							<Text style={[styles.textLabel, styles.baseInfoLabel]}>结算基准日</Text>
							<Text style={[styles.textValue, styles.baseInfoValue]}>{baseDateSettle || '-'}</Text>
						</View> : null}
						<View style={styles.baseInfoItem}>
							<Text style={[styles.textLabel, styles.baseInfoLabel]}>签约地点</Text>
							<Text style={[styles.textValue, styles.baseInfoValue]}>{signAddress || '-'}</Text>
						</View>
						<View style={styles.baseInfoItem}>
							<Text style={[styles.textLabel, styles.baseInfoLabel]}>业务员</Text>
							<Text style={[styles.textValue, styles.baseInfoValue]}>
								{bizStaffName || bizTeamName ? `${bizStaffName || '-'} | ${bizTeamName || '--'}` : '--'}
							</Text>
						</View>
						<View style={styles.baseInfoItem}>
							<Text style={[styles.textLabel, styles.baseInfoLabel]}>业务组织</Text>
							<Text style={[styles.textValue, styles.baseInfoValue]}>{this.choice.corpName || '-'}</Text>
						</View>
						<View style={styles.baseInfoItem}>
							<Text style={[styles.textLabel, styles.baseInfoLabel]}>目的地</Text>
							<Text style={[styles.textValue, styles.baseInfoValue]}>{destAddress || '-'}</Text>
						</View>
						<View style={styles.baseInfoItem}>
							<Text style={[styles.textLabel, styles.baseInfoLabel]}>合同备注</Text>
							<Text style={[styles.textValue, styles.baseInfoValue]}>{remark || '-'}</Text>
						</View>
						<View style={styles.baseInfoItem}>
							<Text style={[styles.textLabel, styles.baseInfoLabel]}>附件</Text>
							<View style={[styles.baseInfoValue, { flexDirection: 'row', justifyContent: 'flex-start' }]}>
								{
									attachmentFileVOs && attachmentFileVOs.map((item, index) => {
										return <Text key={index} style={[styles.baseInfoContract, { marginLeft: 0 * scale, marginRight: 5 * scale }]} onPress={() => {
											if (item.fileExtName === 'PDF' || item.fileExtName === 'pdf') {
												this.props.navigation.navigate('ContractPdfPage', { finalFileId: item.fileId, title: '附件信息' });
											} else if (item.fileExtName && item.fileExtName.toUpperCase() === 'JPG' || item.fileExtName && item.fileExtName.toUpperCase() === 'PNG' || item.fileExtName && item.fileExtName.toUpperCase() === 'JPEG' || item.fileExtName === 'BMP') {
												this.preview(item.fileId);
											} else {
												ToastUtil.showInfo(`抱歉，暂不支持${item.fileExtName}文件类型的预览～`)
											}
										}}>{`[附件${attachmentFileVOs.length > 1 ? index + 1 : ''}]`}</Text>

									})
								}
							</View>
						</View>
					</View>
				</Animated.View>
			</View>
		)
	}

	_renderOrderPruductList = (data) => {
		const { orderItemList } = data;
		console.log('orderItemList--0000', orderItemList)
		return (
			<View style={{ marginTop: 15 * scale }}>
				{
					orderItemList && orderItemList.map((item, index) => {
						const { goodsName, quantity, tempPriceFormulaDesc, nakedPrice, priceFormulaDesc, executedQuantity, executableQuantity, priceType, price,
							udPrice, ysPercent } = item;
						return (
							<View key={index} style={{ marginBottom: 16 * scale }}>
								<View style={[styles.contentView,]}>
									<View style={styles.baseInfoTitle}>
										<Text style={styles.baseInfoTitleText}>{goodsName}</Text>
									</View>

									<Animated.View style={[{ paddingLeft: 14 * scale, paddingRight: 14 * scale, height: item.boxHeight, overflow: 'hidden' }]}>
										<View style={styles.topCardContent} onLayout={(event) => this._onProductLayout(index, event)}>
											<View style={styles.topCardContentItem}>
												<Text style={[styles.commonText, styles.textLabel]} numberOfLines={1}>订货量(吨)</Text>
												<Text style={[styles.commonText, styles.textValue]} numberOfLines={1}>{quantity || '--'}</Text>
											</View>
											{/* <View style={styles.topCardContentItem}>
											<Text style={[styles.commonText, styles.textLabel]} numberOfLines={1}>暂定价(元)</Text>
											<Text style={[styles.commonText, styles.textValue]} numberOfLines={1}>{priceType == 1 ? price : '公式价'}</Text>
										</View> */}
											<View style={styles.topCardContentItem}>
												<Text style={[styles.commonText, styles.textLabel]} numberOfLines={1}>溢短装比例</Text>
												<Text style={[styles.commonText, styles.textValue]} numberOfLines={1}>{MethodUtil.countObj.multiply((ysPercent || 0), 100)}%</Text>
											</View>
										</View>
										{/**外贸显示暂定价公式 */}
										{
											item.showItem && priceType == 2 ?
												<View style={styles.priceItem}>
													<Text style={[styles.commonText, styles.textLabel]}>暂定价: </Text>
													<Text style={[styles.commonText, styles.textValue, styles.maxWidth]}>{tempPriceFormulaDesc ? (tempPriceFormulaDesc || '-') : (nakedPrice || '-')}</Text>
												</View>
												: null
										}
										{
											item.showItem && priceType == 2 ?
												<View style={styles.priceItem}>
													<Text style={[styles.commonText, styles.textLabel]}>结算价: </Text>
													<Text style={[styles.commonText, styles.textValue, styles.maxWidth]}>{priceFormulaDesc || '-'} | {udPrice > 0 ? '升' : '贴'}水：{Math.abs(udPrice || 0)}元/吨</Text>
												</View>
												: null
										}
										<DashedLine />
										{item.showItem ? <Text style={[styles.commonText, styles.textValue, styles.mappingTitle]}>关联{this.orderType === 'P' ? '采购' : '销售'}执行</Text> : null}
										<View style={[styles.topCardContent, { justifyContent: item.showItem ? 'center' : 'space-between', marginTop: 10 * scale }]}>
											<View style={item.showItem ? styles.topCardContentItem : styles.rowInfoItem}>
												<Text style={[styles.commonText, styles.textLabel]} numberOfLines={1}>已执行量(吨)</Text>
												<Text style={[styles.commonText, styles.textValue]} numberOfLines={1}>{executedQuantity || '--'}</Text>
											</View>
											<View style={item.showItem ? styles.topCardContentItem : styles.rowInfoItem}>
												<Text style={[styles.commonText, styles.textLabel]} numberOfLines={1}>剩余量(吨)<Text style={styles.redTips}>含溢短装</Text></Text>
												<Text style={[styles.commonText, styles.textValue]} numberOfLines={1}>{executableQuantity || '--'}</Text>
											</View>
										</View>

										{
											item.showItem && item.longExecItemList && item.longExecItemList.map((execItem, index) => {
												return (
													<View style={styles.topCardContent} key={index}>
														<View style={{ width: '25%' }}><Text style={[styles.commonText, styles.textLabel]} numberOfLines={1}>{execItem.createTime && execItem.createTime.substring(0, 10)}</Text></View>
														<View style={{ width: '20%' }}><Text style={[styles.commonText, styles.textLabel]} numberOfLines={1}>执行量(吨)</Text></View>
														<View style={{ width: '20%' }}><Text style={[styles.commonText, styles.textValue]} numberOfLines={1}>{execItem.quantity || '--'}</Text></View>
														<View style={{ flex: 1 }}><Text style={[styles.commonText, styles.textValue, { color: '#148CFB' }]} numberOfLines={1} onPress={() => { this.goLongExcDetail(execItem) }}>[{execItem.orderId}]</Text></View>
													</View>
												)
											})
										}
									</Animated.View>
								</View>
								<TouchableOpacity activeOpacity={1} style={styles.toggleImg} onPress={() => this.toggleProduct(index, item.boxHeight, item.openHeight)}>
									<Image source={item.showItem ? closeImg : showImg} />
								</TouchableOpacity>
							</View>
						)
					})
				}
			</View >
		)
	}

	render () {
		const { longOrderDetail } = this.state;
		return (
			<ScrollView style={styles.container}>
				{longOrderDetail ? this._renderTopCard(longOrderDetail) : null}
				{longOrderDetail ? this._renderOrderBaseInfo(longOrderDetail) : null}
				{longOrderDetail ? this._renderOrderPruductList(longOrderDetail) : null}
				<ModalPicDelComponent {...modalPicDelCfg} />
			</ScrollView>
		)
	}
}
const styles = StyleSheet.create({
	container: {
		flex: 1,
		backgroundColor: style.color.bgGray,
	},
	contentView: {
		width: '94%',
		marginLeft: '3%',
		backgroundColor: '#FFFFFF',
		borderRadius: 4 * scale,
	},
	topBg: {
		height: 73 * scale,
		width: '100%',
		backgroundColor: style.color.themeColor,
		position: 'absolute',
		top: 0,
		zIndex: -1
	},
	topCard: {
		marginBottom: 15 * scale,
		marginTop: 7 * scale,
		padding: 14 * scale,
	},
	commonText: {
		fontSize: 13 * scale,
		color: '#272727',
		paddingBottom: 6 * scale,
		paddingTop: 6 * scale,
	},
	topCardHeader: {
		flexDirection: 'row',
		justifyContent: 'space-between',
		alignItems: 'center',
		marginBottom: 10 * scale
	},
	topCardFooter: {
		flexDirection: 'row',
		justifyContent: 'flex-start',
		alignItems: 'center',
		marginTop: 10 * scale
	},
	topCardContent: {
		flexDirection: 'row',
		justifyContent: 'center',
		alignItems: 'flex-start',
		marginBottom: 10 * scale,
	},
	topCardContentItem: {
		flex: 1,
		flexDirection: 'column',
		justifyContent: 'center',
		alignItems: 'flex-start'
	},
	textValue: {
		textAlign: 'left',
		fontSize: 13 * scale
	},
	textLabel: {
		textAlign: 'left',
		opacity: 0.7,
		fontSize: 13 * scale
	},
	orderTypeImg: {
		marginLeft: 9 * scale,
	},
	baseInfoTitle: {
		padding: 14 * scale,
		backgroundColor: '#fff',
		flexDirection: 'row',
		justifyContent: 'space-between',
		alignItems: 'center'
	},
	baseInfoTitleText: {
		fontSize: 14 * scale,
		color: '#272727',
		fontWeight: 'bold'
	},
	baseInfoContract: {
		fontSize: 13 * scale,
		color: '#148CFB',
		marginLeft: 32 * scale,
	},
	baseInfoView: {
		marginLeft: 12 * scale,
		marginRight: 12 * scale,
		marginBottom: 14 * scale,
		paddingBottom: 14 * scale
	},
	baseInfoItem: {
		flexDirection: 'row',
		alignItems: 'flex-start',
		justifyContent: 'space-around',
		marginTop: 10 * scale
	},
	baseInfoLabel: {
		textAlign: 'right',
		width: 80 * scale,
		marginRight: 14 * scale
	},
	baseInfoValue: {
		flex: 1
	},
	singleBorder: {
		opacity: 0.5,
		color: '#272727',
		paddingLeft: 8 * scale,
		paddingRight: 8 * scale
	},
	baseInfoValueRow: {
		flex: 1,
		flexDirection: 'row',
		flexWrap: 'wrap'
	},
	baseInfoValueUom: {
		color: '#FA4516',
		marginLeft: 7 * scale
	},
	baseInfoValueColumn: {
		flex: 1,
		flexDirection: 'column'
	},
	toggleImg: {
		height: 30 * scale,
		width: '100%',
		marginLeft: 12 * scale,
		flexDirection: 'row',
		justifyContent: 'center',
	},
	rowInfoItem: {
		flex: 1,
		flexDirection: 'row',
		marginBottom: 10 * scale,
	},
	priceItem: {
		flexDirection: 'row',
		marginBottom: 10 * scale,
	},
	mappingTitle: {
		// marginBottom: 10 * scale,
		marginTop: 12 * scale,
	},
	imgStyle: {
		width: 10 * scale,
		height: 6 * scale
	},
	redTips: {
		color: 'red',
		fontSize: 10 * scale
	},
	maxWidth: {
		maxWidth: 275 * scale
	}
})